<template>
  <div class="default-main ba-table-box">
    <TableHeader
      :buttons="['refresh', 'comSearch', 'columnDisplay']"
      :quick-search-placeholder="placeholder"
      @action="baTable.onTableHeaderAction"
    />
    <!-- 表格 -->
    <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
    <Table ref="tableRef" @action="baTable.onTableAction" />
    <!-- 表单 -->
    <!-- <PopupForm v-if="baTable.form.operate" ref="formRef" /> -->
  </div>
</template>
<script lang="ts" setup>
import { ref, provide, onMounted, markRaw } from "vue";
import { useRouter, useRoute } from "vue-router";
import baTableClass from "@/utils/baTable";
import { LineCruiseTasks } from "@/api/backend/index";
import { baTableApi, operatorShowOff, getDictData } from "@/utils/common"; // 导入表格api方法生成器
import Table from "@/components/table/index.vue";
import TableHeader from "@/components/table/header/index.vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import type { TableRow, TableColumn } from "@/utils/baTable"; //表格列行类型
//   import PopupForm from "./popupForm.vue";
import { useStaff } from "@/store/backend/ServiceM/staff";
// import TagState from "@/components/dictTagState/index.vue";
import TagState from "./taskTagState.vue";
// import TagSearch from "@/components/tagSearch/index.vue";
import { useDictionary } from "@/store/backend/tool/dictionary";
import { useLineCruiseTask } from "@/store/backend/LineCruiseM/task";
import { useStandard } from "@/store/backend/LineCruiseM/standard";
import { useNavTabs } from "@/store/navTabs";

const dictionary = useDictionary();
const standard = useStandard();

const placeholder = ref<string>("模糊搜索");
const tableRef = ref();
const staff = useStaff();
const router = useRouter();
const line = useLineCruiseTask();
const navTabs = useNavTabs();
const route = useRoute();

//字段显隐记忆功能
const filedShowOff = (filter: any) => {
  if ((navTabs as any).columnDisplayStoreMap) {
    return (navTabs as any).columnDisplayStoreMap.get(
      route.path + "/" + filter
    );
  }
  return true;
};
// 每页个数记忆功能
const pageSizeKeep = () => {
  if ((navTabs as any).pageSizeMap) {
    return (navTabs as any).pageSizeMap.get(route.path + LineCruiseTasks)
      ? (navTabs as any).pageSizeMap.get(route.path + LineCruiseTasks)
      : 10;
  }
  return 10;
};

const baTable = new baTableClass(
  new baTableApi(LineCruiseTasks),
  {
    pk: "id",
    column: [
      { type: "selection", align: "center", operator: false },
    //   {
    //     show: filedShowOff("state"),
    //     label: "任务状态",
    //     prop: "state",
    //     align: "center",
    //     render: "customRender",
    //     customRender: markRaw(TagState),
    //     operator: false,
    //     //   comSearchRender: "customRender",
    //     //   comSearchCustomRender: markRaw(TagSearch),
    //   },
      {
        show: filedShowOff("equipmentInfoList"),
        label: "巡检进度",
        prop: "equipmentInfoList",
        align: "center",
        // render: "customRender",
        // customRender: markRaw(Info),
        operator: false,
        render: "customTemplate",
        customTemplate: (row: TableRow, field: TableColumn, value: any) => {
          return "<p style='color:#409eff;'>待检 " + unChecked(value) + "</p>";
        },
      },
      {
        show: filedShowOff("planName"),
        label: "计划名称",
        prop: "planName",
        align: "center",
      },
      {
        show: filedShowOff("planNumber"),
        label: "计划编号",
        prop: "planNumber",
        align: "center",
      },
    //   {
    //     show: filedShowOff("startTime"),
    //     label: "任务开始时间",
    //     prop: "startTime",
    //     align: "center",
    //     operator: false,
    //     render: "customTemplate",
    //     customTemplate: (row: TableRow, field: TableColumn, value: any) => {
    //       return "<p style='color:#409eff;'>" + getTime(value) + "</p>";
    //     },
    //   },
    //   {
    //     show: filedShowOff("endTime"),
    //     label: "任务结束时间",
    //     prop: "endTime",
    //     align: "center",
    //     operator: false,
    //     render: "customTemplate",
    //     customTemplate: (row: TableRow, field: TableColumn, value: any) => {
    //       return "<p style='color:orange;'>" + getTime(value) + "</p>";
    //     },
    //   },
    //   {
    //     show: filedShowOff("taskStart"),
    //     label: "巡检开始时间",
    //     prop: "taskStart",
    //     align: "center",
    //     operator: false,
    //   },
    //   {
    //     show: filedShowOff("taskEnd"),
    //     label: "计划结束时间",
    //     prop: "taskEnd",
    //     align: "center",
    //     operator: false,
    //   },
    //   {
    //     show: filedShowOff("employeeName"),
    //     label: "计划巡检人员名称",
    //     prop: "employeeName",
    //     align: "center",
    //   },
      {
        // show: operatorShowOff([route.path + "/remove", route.path + "/edit"]),
        label: "操作",
        align: "center",
        width: "130",
        render: "buttons",
        fixed: "right",
        buttons: [
          {
            render: "tipButton",
            name: "infoTask",
            title: "详情",
            text: "",
            type: "primary",
            icon: "iconfont icon-chaxunyujisuan",
            class: "table-row-edit",
            disabledTip: false,
            // 按钮是否显示，请返回布尔值
            display: (row: TableRow, field: TableColumn) => {
              return false;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
        ],
        operator: false,
      },
    ],
    filter: {
      pageSize: pageSizeKeep(),
      // id: Local.get("adminInfo")?.companyid,
      // regions: [] + "",
      // name: route.query.name,
    },
    acceptQuery: false,
  },
  {
    defaultItems: {
      // status: 0,
    },
  }
);

//获取巡检计划状态的字典
const getMenuStatus = () => {
  dictionary.getDictInfo("sys_linetask_state").then((res: any) => {
    // state.statusDict = getDictData(res);
    dictionary.tag = getDictData(res);
    console.log("获取巡检计划状态的字典", dictionary.tag);
  });
};
// getMenuStatus();

const infoButtonClick = (name: string, row: any) => {
  console.log("任务跳转详情页", row);
  standard.equipmentInfos = row.equipmentInfoList;
  line.$patch((state) => {
    state.loading = true;
    state.query = name;
    state.single = row;
  });
  //!待跳转到实时设备详情 通常是获取拿到id获取数据后跳转
  router.push({
    path: "/admin/task/detail",
    query: {},
  });
};

//判断是否含有异常巡检设备
const isOk = (data: any[]) => {
  for (let i = 0; i < data.length; i++) {}
};
//计算未检项目
const unChecked = (data: any[]) => {
  let sum = 0;
  for (let i = 0; i < data.length; i++) {
    if (data[i].state === "0") {
      sum += 1;
    }
  }
  return sum;
};

//获取准确时间
const getTime = (data: string) => {
  return data.split(" ")[1];
};

onMounted(() => {
  //全局事件总线
  const { proxy } = useCurrentInstance();
  //将table的ref给到table类
  baTable.table.ref = tableRef.value;
  baTable.mount();
  baTable.getList(LineCruiseTasks);

  /**
   * 表格内的按钮响应
   * @param name 按钮name
   * @param row 被操作行数据
   */
  proxy.eventBus.on(
    "onTableButtonClick",
    (data: { name: string; row: TableRow | any }) => {
      if (!baTable.activate) return;
      //回滚功能暂无
      if (data.name == "rollback") {
        // onRollback([data.row[baTable.table.pk!]])
      } else if (data.name == "infoTask") {
        // 主键字段 pk: "name",
        infoButtonClick(
          (data.row as TableRow)[baTable.table.pk!],
          data.row as any
        );
      }
    }
  );
});

// 实例化表格后，将 baTable 的实例提供给上下文
provide("baTable", baTable);
provide("staff", staff);
provide("dictionary", dictionary);
</script>
<style lang="scss" scoped></style>
